<template>
  <div style="height: 100%;">
    <!--@infinite-scroll滚动监听-->
    <pull-to @infinite-scroll="getMoreList">
      <ul class="consult_list_ul clear">
        <li class="consult_list_li list_style clear" :class="item.check == true ? 'checked' : ''"
            @click="check_consult(item.id,$event)" v-for="(item,index) in consult_list" :key="index">
          <div class="item_consult_time float_left">{{item.create_time | UTClocalmm}}</div>
          <div class="item_consult_name float_left">{{item.name}}</div>
          <div class="item_consult_phone float_left">{{item.phone}}</div>
          <div class="item_consult_content float_left">{{item.content}}</div>
        </li>
      </ul>
    </pull-to>
  </div>
</template>

<script>
  import PullTo from 'vue-pull-to'
  //每个子组价都需要抛出
  export default{
    name: "scroll_agent",
    components: {
      PullTo
    },
    methods: {
      /**
       * 滚动监听调用函数
       * **/
      getMoreList(){
        let that = this;
        if (!that.no_data) {
          that.load_consult_list();
        }
      },
      /**
       * 封装请求函数
       * **/
      load_consult_list(){
        let that = this;
        that.base.ajax_get(that.next_url, that.callback_consult, 'first')
      },

      /**
       * 问题与咨询列表回调函数
       * **/
      callback_consult(data){
        let that = this;
        if (data.status == 0) {
          that.consult_list.push(...data.results);
          //验证是否还有next url
          if (that.checkStringNull(data.next) !== true) {
            that.next_url = data.next;
          } else {
            that.no_data = true;
            console.log("没数据啦")
          }
        } else {
          alert(data.detail);
        }
      },

      /**
       * 点击问题与咨询li
       * apply_id:加盟商ID
       * that_：点击当前Li
       * **/
      check_consult(consult_id, e){
        let that = window.event || e;
        let that_ = this;
        let that_li = that.currentTarget;
        that_.base.ajax_post('/site/consult/check', {"id": consult_id}, function (data) {
          if (data.status == 0) {
            $(that_li).addClass("checked");
          } else {
            alert(data.detail)
          }
        });
      },
    },
    //在模板渲染之后调用
    mounted () {
      //首先调用请求数据
      this.load_consult_list();
    },
    data () {
      return {
        no_data: false,
        loaded_: true,
        consult_list: [],
        next_url: '/site/consult/list'
      }
    }
  }
</script>

<style scoped>
  ::-webkit-scrollbar {
    display: none;
  }
  .consult_list_ul{
    padding: 0 20px;
  }
  .consult_list_li{
    height: 110px;
    padding: 5px 0;
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    position: relative;
  }
  .consult_list_li div{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .item_consult_time{
    width: 23.5%;
    display: flex;
  }
  .item_consult_name{
    width: 23.5%;
  }
  .item_consult_phone{
    width: 23.5%;
  }
  .item_consult_content{
    height: 100px;
    width: 29.5%;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical; /*多行文本超出隐藏*/
    word-wrap: break-word; /*超出部分强制换行*/
    word-break: break-all;
  }
















  .apply_list_ul .checked,.consult_list_ul .checked{
    color: #999999;
  }
  .apply_list_ul .list_style::before,.consult_list_ul .list_style::before{
    color: #327FF0;
    content: "●";
    position: absolute;
    top: 30%;
    left: -13px;
  }
  .apply_list_ul .checked::before,.consult_list_ul .checked::before{
    display: none;
  }
  .apply_list_ul li:nth-child(even),.consult_list_ul li:nth-child(even){
    background-color: rgba(53,80,121,.05);
  }

  .item_apply_time{
    height: 60px;;
    width: 19%;
  }
  .item_apply_name{
    width: 18%;
  }
  .item_apply_phone{
    width: 18%;
  }
  .item_apply_address{
    width: 23%;
  }
  .item_company_name{
    width: 22%;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; /*多行文本超出隐藏*/
    word-wrap: break-word; /*超出部分强制换行*/
    word-break: break-all;
  }

  .apply_li_box{
    height: 60px;
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }
  .apply_li_box div{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }



</style>
